<template>
  <div class="leftnav">
    <div class="navbox">
      <el-menu
        class="el-menu-vertical-demo"
        @select="fun"
        background-color="#2c5a8e"
        text-color="#fff"
        :collapse="foldbool"
        :router="true"
        :collapse-transition="false"
        active-text-color="#ffd04b"
        :default-active="this.$route.path"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>系统首页</span>
          </template>
          <el-menu-item index="/home">首页</el-menu-item>
          <el-menu-item index="/home/user">用户管理</el-menu-item>
        </el-submenu>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-s-management"></i>
            <span>基础信息</span>
          </template>
          <el-menu-item index="/home/VehicleInfo">车辆信息</el-menu-item>
          <el-menu-item index="/home/CarParts">车辆配件信息</el-menu-item>
        </el-submenu>

        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-set-up"></i>
            <span>用车管理</span>
          </template>

          <el-menu-item index="/home/applycar">用车申请</el-menu-item>
          <el-menu-item index="/home/returncar">还车登记</el-menu-item>
          <!-- <el-menu-item index="/home/vehiclefee">车辆费用</el-menu-item> -->
        </el-submenu>

        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-collection"></i>
            <span>年检保险</span>
          </template>
          <el-menu-item index="/home/zsja">车辆年检登记</el-menu-item>
          <el-menu-item index="/home/zsjb">车辆保险登记</el-menu-item>
        </el-submenu>

        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-bangzhu"></i>
            <span>维保管理</span>
          </template>
          <el-menu-item index="/home/Maintenance">车辆维保申请</el-menu-item>
          <el-menu-item index="/home/PickupCar">维保取车登记</el-menu-item>
        </el-submenu>

        <el-submenu index="6">
          <template slot="title">
            <i class="el-icon-attract"></i>
            <span>违章事故</span>
          </template>
          <el-menu-item index="/home/lyja">车辆事故登记</el-menu-item>
          <el-menu-item index="/home/lyjb">车辆违章登记</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>

    <div class="foldbox" @click="foldfun()">
      <i class="el-icon-s-unfold" v-if="foldbool"></i>
      <i class="el-icon-s-fold" v-else></i>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      foldbool: false,
      indexpath: "/home",
    };
  },
  methods: {
    // handleOpen(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    foldfun() {
      console.log("fold");
      this.foldbool = !this.foldbool;
    },
    fun(index) {
      // console.log(index);
      this.indexpath = index;
      console.log("1", this.indexpath);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-menu-item,
.el-submenu__title {
  height: 55px;
  line-height: 55px;
}
.leftnav {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .navbox {
    height: 100%;
    overflow: auto;
    flex: 1;
    .el-menu {
      border: none;
    }
    .el-menu-item i,
    .el-submenu__title i {
      color: #f5a623;
    }
  }
  .foldbox {
    width: 100%;
    height: 40px;
    background-color: #2c5a8e;
    text-align: center;
    .el-icon-s-fold,
    .el-icon-s-unfold {
      font-size: 22px;
      color: #f5a623;
      line-height: 40px;
    }
  }
}
// 隐藏滚动条
::-webkit-scrollbar {
  display: none;
}
</style>